<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：首页我的信息
-->

<template>
    <Card :bordered="false" style="height:430px;">
        <p slot="title">
        	<Icon type="ios-pulse" style="color:#07a1be;font-size: 18px;"/>
        	<span style="padding-left:2px;font-weight: normal;">班级统计柱状图</span>
        </p>
        <div style="width:100%;float:left;text-align: center;margin:0 auto;display:table;" align="center">	
      		<div ref="bar" style="width:100%;min-width: 600px; float:left;height:330px;"></div>
        </div>
    </Card>
</template>

<script>
	import Highcharts from 'highcharts'
	require('highcharts/modules/exporting')(Highcharts);
	export default {
		name:"bar",
		props: {
    		newstatic:{
    			type: Array
    		}
    	},
		mounted(){
		},
		methods: {
		    drawLine(){
		    	var newstatic=this.newstatic;
				var nj=[];
		    	var sjyd=[];//书籍阅读
				var hchjhd=[];//好词好句好段
				var zjdhg=[];//章节读后感
		    	var scyd=[];//诗词阅读
		    	var jfnum=[];//总积分
		    	for(var i=0;i<newstatic.length;i++){
					if(newstatic[i].NJ==1){
						nj.push("一年级");
					}else if(newstatic[i].NJ==2){
						nj.push("二年级");
					}else if(newstatic[i].NJ==3){
						nj.push("三年级");
					}else if(newstatic[i].NJ==4){
						nj.push("四年级");
					}else if(newstatic[i].NJ==5){
						nj.push("五年级");
					}else if(newstatic[i].NJ==6){
						nj.push("六年级");
					}
					
					if(newstatic[i].PLANLOG){
						sjyd.push(newstatic[i].PLANLOG);
					}else{
						sjyd.push(0);
					}
		    		
					if(newstatic[i].HCHJHD){
						hchjhd.push(newstatic[i].HCHJHD);
					}else{
						hchjhd.push(0);
					}
					
					if(newstatic[i].ZJDHG){
						zjdhg.push(newstatic[i].ZJDHG);
					}else{
						zjdhg.push(0);
					}

					if(newstatic[i].PLOG){
						scyd.push(newstatic[i].PLOG);
					}else{
						scyd.push(0);
					}
					
					if(newstatic[i].JFNUM){
						jfnum.push(newstatic[i].JFNUM);
					}else{
						jfnum.push(0);
					}
		    	}
		        var chart = Highcharts.chart(this.$refs.bar, {
		    	    chart: {
		    	        type: 'column'
		    	    },
		    	    lang:{ 
		    			downloadJPEG: "下载JPEG 图片",  
		    			downloadPDF: "下载PDF文档"  ,
		    			downloadPNG: "下载PNG 图片",
		    			downloadSVG: "下载SVG 矢量图" , 
		    			exportButtonTitle: "导出图片"  ,
		    	    },  
		    	    title: {
		    	        text: '班级统计柱状图'
		    	    },
		    	    xAxis: {
		    	        categories:nj,
		    	        crosshair: true
		    	    },
		    	    yAxis: {
		    	        min: 0,
		    	        title: {
		    	            text: ''
		    	        }
		    	    },
		    	    tooltip: {
		    	        // head + 每个 point + footer 拼接成完整的 table
		    	        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		    	        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		    	        '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
		    	        footerFormat: '</table>',
		    	        shared: true,
		    	        useHTML: true
		    	    },
		    	    plotOptions: {
		    	        column: {
		    	            borderWidth: 0
		    	        }
		    	    },
		    	    series: [{
		    	        name: '书籍阅读总数',
		    	        data:sjyd
		    	    },{
		    	        name: '好词好句好段',
		    	        data:hchjhd
		    	    }, {
		    	        name: '章节读后感',
		    	        data: zjdhg
		    	    }, {
		    	        name: '诗词阅读总数',
		    	        data: scyd
		    	    }, {
		    	        name: '总积分',
		    	        data: jfnum
		    	    }]
		    	});
		    }
		},
		watch:{
			newstatic(news,olds){
				if(news){
					this.drawLine();
				}
			}
		},
	}
</script>

<style>

</style>



